$breadcrumb-color: #777;
$breadcrumb-color-hover: #eee;
$title-color: #fff;
$sub-title-color: #bbb;
$background: rgba(255, 255, 255, 0.03);

.viewBox {
  position: relative;
  background: $background;
}

.viewBoxBorder {
  border: 1px solid $view-border-color;
}

.viewBoxMargin {
  margin: 24px;
}

.viewBoxPadding {
  padding: 24px;
}

.viewBoxRadius {
  border-radius: 8px;
}

.breadcrumbBox {
  position: absolute;
  top: 3px;
  left: 12px;
  display: flex;
  width: calc(100% - 12px);
}

.back {
  margin-right: 8px;
  color: $breadcrumb-color;
  cursor: pointer;

  svg {
    font-size: 12px;
  }

  &:hover {
    color: $breadcrumb-color-hover;
  }
}

.breadcrumb {
  display: block;
  flex-grow: 1;
}

.breadcrumbItem {
  font-size: 12px;
  color: $breadcrumb-color;
  user-select: none;
}

.breadcrumbItemHover {
  &:hover {
    color: $breadcrumb-color-hover;
  }
}

.header {
  display: flex;
  width: 100%;
}

.titleBox {
  flex-grow: 1;
  display: flex;
}

.title {
  font-size: 16px;
  color: $title-color;
}

.subTitle {
  margin-left: 16px;
  font-size: 14px;
  color: $sub-title-color;
  line-height: 28px;
}

.extra {
  float: right;
  margin: -10px -10px 0 0;
}

.footerBox {
  width: 100%;
  height: 20px;
}

.footer {
  position: absolute;
  bottom: -16px;
  left: 12px;
}
